<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { guzhangstepApi as MainApi, guzhangById, eventv1Api } from '@T2/service/api.ts';
import { useCurrentWatchStore, useIuserInfoStore } from '@T2/store/users.ts';
import UploadAttachment from '@T2/components/uploadAttachment/index.vue';
import Detail from './components/detail.vue';
import StepDetail from './components/stepDetail.vue';
  
const iuserInfoStore = useIuserInfoStore();
const { info } = iuserInfoStore;
const currentWatchStore = useCurrentWatchStore();
const { curProject } = currentWatchStore;

const { type, content } = defineProps({
  type: {
    type: String,
    validator(value) {
      return ['故障详情', '故障审核'].includes(value);
    },
    required: true,
  },
  content: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(['close']);
const visible = ref(true);

onMounted(() => {
  if (content.status === '待审核' && type === '故障审核') {
    initCheckFormModel();
  }
});

const stepLoading = ref(false);
/* 故障审核 */
const checkForm = reactive({
  model: {},
  fj_json: [],
  fj_updateTimes: 0,
});
const checkFormRef = ref(null);
const initCheckFormModel = () => {
  checkForm.model = {
    yj: '无需处理',
    wx: false,
    info: '',
    fj: [],
  };
  checkForm.fj_json = [];
  checkForm.fj_updateTimes++;
  nextTick(() => {
    checkFormRef.value.clearValidate();
  });
}
const checkFjChange = (files) => {
  checkForm.model.fj = files;
}
const addGuzhangstep = () => {
  if (!checkForm.model.info) {
    ElMessage.error('请输入审批说明！');
    stepLoading.value = false;
    return false;
  }
  MainApi({
    method: 'post',
    data: {
      ...checkForm.model,
      action: '故障审核',
      project: curProject.id,
      guzhang: content.id,
      creater: info.id,
    }
  }).then(res => {
    changeGuzhangStatus(checkForm.model.yj);
  }).catch(err => {
    stepLoading.value = false;
  })
}
const changeGuzhangStatus = (yj) => {
  const status = {
    '提交上级': '待审核',
    '转维修工单': '已转工单',
    '无需处理': '无需处理',
  }[yj];
  guzhangById({
    method: 'patch',
    id: content.id,
    data: {
      status,
    }
  }).then(res => {
    emits('close', true);
    ElMessage.success('提交审核成功！');
    stepLoading.value = false;
  }).catch(err => {
    stepLoading.value = false;
  });
}

/* 转维修工单 */
const eventv1Form = reactive({
  model: {
    level: '一',
  }
});

const closeClick = () => {
  emits('close', false);
}
const submitClick = async () => {
  if (type === '故障详情') {
    emits('close', false);
  } else if (type === '故障审核') {
    stepLoading.value = true;
    if (checkForm.model.yj === '转维修工单') {
      eventv1Api({
        method: 'post',
        data: {
          unit: content.unit,
          position: content.position,
          addr: content.addr,
          type: content.type,
          level: eventv1Form.model.level,
          describe: content.describe,
          files: content.files,
          fj: content.fj,
          comefrom: '故障上报',
          comefrom_id: content.id,
          project: curProject.id,
          status: '待派单',
          creater: info.id,
        }
      }).then(res => {
        ElMessage.success('转换工单成功！');
        addGuzhangstep();
      }).catch(err => {
        stepLoading.value = false;
      });
    } else {
      addGuzhangstep();
    }
  }
}
</script>

<template>
  <div>
    <el-drawer v-model="visible" size="980" @close="closeClick()">
      <template #header>
        <div class="head-name">{{ type }}</div>
      </template>
      <template #default>
        <div class="content-box">
          <el-steps direction="vertical" :active="3">
            <!-- 故障信息-->
            <Detail :content="content"/>
            
            <!-- 审核记录-->
            <StepDetail :content="content" />
            
            <!-- 故障审核-->
            <el-step v-if="content.status === '待审核' && type === '故障审核'">
              <template #icon>
                <div class="step-icon"></div>
              </template>
              <template #title>
                <div class="title-line1 flex--center">
                  <span class="title-name">故障审核</span>
                </div>
              </template>
              <template #description>
                <div class="check-box">
                  <el-form
                    ref="checkFormRef"
                    :model="checkForm.model"
                    label-width="100px"
                    class="flex flex-wrap"
                  >
                    <el-form-item style="width: 50%;" prop="yj" label="审批意见：">
                      <el-radio-group v-model="checkForm.model.yj">
                        <el-radio value="提交上级" :disabled="true">提交上级</el-radio>
                        <el-radio value="转维修工单">转维修工单</el-radio>
                        <el-radio value="无需处理">无需处理</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item style="width: 50%;" label="工单等级：" v-if="checkForm.model.yj === '转维修工单'">
                      <el-select v-model="eventv1Form.model.level" clearable>
                        <el-option value="一" label="一级"></el-option>
                        <el-option value="二" label="二级"></el-option>
                        <el-option value="三" label="三级"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="width: 100%;" prop="describe" label="审批说明：">
                      <el-input style="width: 100%;" v-model="checkForm.model.info" type="textarea" :rows="5" />
                    </el-form-item>
                    <el-form-item style="width: 50%;" prop="fj" label="上传附件：">
                      <UploadAttachment
                        :fj_json="checkForm.fj_json"
                        :updateTimes="checkForm.fj_updateTimes"
                        :maxSizeMB="20"
                        @files-change="checkFjChange"
                      >
                        <div class="upload_info" style="margin-top: 6px">请上传其他格式文件，不超过20MB</div>
                      </UploadAttachment>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <template v-if="content.status === '待审核' && type === '故障审核'">
            <el-button @click="closeClick()">取 消</el-button>
            <el-button type="primary" @click="submitClick()" :disabled="stepLoading">确 定</el-button>
          </template>
          <template v-else>
            <el-button type="primary" @click="closeClick()">关 闭</el-button>
          </template>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.check-box {
  margin-top: 4px;
}
</style>

<style scoped>
:deep(.el-drawer__body) {
  padding: 26px 0 26px 38px;
}
:deep(.el-drawer__header) {
  height: 60px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid #EDEFF3;
}
:deep(.el-drawer__header .head-name) {
  font-weight: 500;
  font-size: 20px;
  color: #252525;
}
:deep(.el-step__title) {
  display: flex;
  align-items: center;
}
:deep(.el-step__description) {
  padding-right: 38px !important;
  padding-bottom: 32px;
}

:deep(.el-radio-group .el-radio) {
  margin-right: 24px;
}
</style>